<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>提货签收</title>
    <link rel="stylesheet" href="../../css/basic.css">
    <style type="text/css">
        .checkArea {
            padding: 0.3rem 0;
            border-bottom: 1px solid #e3e3e3;
            height: 0.6rem;
        }

        .widthDraw-area {
            color: #666;
            font-size: 0.28rem;
            padding: 0.3rem 0;
            width: 90%;
            height: auto;
            margin: auto;
        }

        .area-top {
            position: relative;
            width: 100%;
        }

        .area-top span, .area-bottom span {
            line-height: 0.8rem;
            float: left;
        }

        .area-bottom {
            position: relative;
            width: 100%;
        }

        .checkbox-area {
            margin-right: 0.4rem;
            float: right;
            width: 0.2rem;
            height: 0.2rem;
            position: relative;
            margin-top: 0.3rem;
        }

        #checkboxInputOne, #checkboxInputTwo {
            display: none;
        }

        .checkbox-area label {
            display: block;
            width: 100%;
            height: 100%;
            -webkit-transition: all .5s ease;
            -moz-transition: all .5s ease;
            -o-transition: all .5s ease;
            -ms-transition: all .5s ease;
            transition: all .5s ease;
            cursor: pointer;
            z-index: 1;
            background: snow;
            border: 1px solid #F23A38;
        }

        .checkbox-area input[type=checkbox]:checked + label {
            background: #F23A38;
        }

        /*以下为上传图片*/
        .upload-font {
            padding-top: 0.2rem;
            line-height: 1rem;
            width: 100%;
            height: 1rem;
            margin: auto;
        }

        .font-title {
            font-size: 0.28rem;
            color: #666;
            display: inline-block;
            float: left;
            margin-left: 5%;
        }

        /*上传图片*/
        #upBox {
            box-sizing: border-box;
            text-align: center;
            width: 100%;
            border: 1px solid transparent;
            margin: auto;
            position: relative;
        }

        #inputBox {
            margin-top: 0.2rem;
            width: 0.5rem;
            height: 0.5rem;
            border: 1px solid transparent;
            color: #F23A38;
            position: relative;
            text-align: center;
            line-height: 0.5rem;
            overflow: hidden;
            font-size: 0.45rem;
            float: left;
            margin-left: 1rem;
        }

        #btn {
            font-size: 0.25rem;
            outline: none;
            width: 2.5rem;
            height: 0.7rem;
            background: #F23A38;
            border: none;
            color: white;
            margin: 1rem 0;
            border-radius: 0.2rem;

        }

        .imgContainer img {
            width: 100%;
            height: 100%;
        }

        .imgContainer p {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0.4rem;
            background: black;
            text-align: center;
            line-height: 0.45rem;
            color: white;
            font-size: 0.25rem;
            display: none;
        }

        .imgContainer:hover p {
            display: block;
        }

        /*异常原因*/
        .reason-area {
            padding-bottom: 0.1rem;
            border-bottom: 1px solid #e3e3e3;
            height: 0.6rem;
            color: #666;
            width: 90%;
            font-size: 0.28rem;
            margin: auto;
        }

        .reason-area input {
            width: 100%;
            height: 100%;
            outline: none;
        }

        .reason-area input::-webkit-input-placeholder {
            font-size: 0.28rem;
        }

        /*图片上传*/
        #imgBox {
            width: 96%;
            /*margin-top: 1rem;*/
            text-align: left;
            margin: 1rem auto 0 auto;
        }

        #img-container0,#img-container1,#img-container2,
        #img-container3,#img-container4 {
            overflow: hidden;
            height: 2rem;
            width: 2rem;
            position: relative;
            border-image: initial;
            display: inline-block;
            margin: 0 2.4%;
            box-sizing: border-box;
        }

        #img-container0 input,#img-container1 input,#img-container2 input,
        #img-container3 input,#img-container4 input{
            height: 2rem;
            width: 2rem;
            opacity: 0;
            position: absolute;
            z-index: 200;
        }

        .back-img, .back-imgOne {
            position: absolute;
            width: 2rem;
            height: 2rem;
            left: 0px;
            top: 0px;
        }

        .add-img {
            width: 0.5rem;
            height: 0.5rem;
            position: relative;
            top: 0.75rem;
            left: 0.75rem;
        }
        .hideImg{display: none !important;}
    </style>
    <script src="../../lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
    <ul>
        <a class="back-a" href="javascript:history.back(-1)"></a>
        <li>提货签收</li>
    </ul>
</div>
<!--主体-->
<div class="main-body-area">
    <div class="widthDraw-area">
        <div class="checkArea area-top">
            <span>正常提货签收</span>
            <section>
                <div class="checkbox-area">
                    <input type="checkbox" value="1" id="checkboxInputOne" name="checkBoxJudge" checked/>
                    <label for="checkboxInputOne"></label>
                </div>
            </section>
        </div>
        <div class="checkArea area-bottom">
            <span>异常提货签收</span>
            <section>
                <div class="checkbox-area">
                    <input type="checkbox" value="2" id="checkboxInputTwo" name="checkBoxJudge"/>
                    <label for="checkboxInputTwo"></label>
                </div>
            </section>
        </div>
    </div>
    <!--以下为异常签收原因-->
    <div class="reason-area">
        <input placeholder="请填写异常签收原因">
    </div>
    <div class="upload-font">
        <span class="font-title">上传1-5张照片</span>
        <div id="upBox">
            <!--<div id="inputBox">+-->
                <!--<input type="file" id="file" multiple accept="image/png,image/jpg">-->
            <!--</div>-->
            <!--<div id="imgBox">-->
            <!--<div class="imgContainer">-->
            <!--<img src=""><p onclick="removeImg(this,0)" class="imgDelete">删除</p>-->
            <!--</div>-->
            <!--</div>-->
            <div id="imgBox">
                <div id="img-container0">
                    <input class="input-img-btn0 file-path" accept="image/png,image/gif" type="file">
                    <img class="back-img" src="" id="img0" alt="">
                    <img id="add-img-btn0" class="add-img" src="../../img/plus.png" alt="上传图片">
                </div>
                <div id="img-container1" class="hideImg">
                    <input class="input-img-btn1 file-path" accept="image/png,image/gif" type="file">
                    <img class="back-img" src="" id="img1" alt="">
                    <img id="add-img-btn1" class="add-img" src="../../img/plus.png" alt="上传图片">
                </div>
                <div id="img-container2" class="hideImg">
                    <input class="input-img-btn2 file-path" accept="image/png,image/gif" type="file">
                    <img class="back-img" src="" id="img2" alt="">
                    <img id="add-img-btn2" class="add-img" src="../../img/plus.png" alt="上传图片">
                </div>
                <div id="img-container3" class="hideImg">
                    <input class="input-img-btn3 file-path" accept="image/png,image/gif" type="file">
                    <img class="back-img" src="" id="img3" alt="">
                    <img id="add-img-btn3" class="add-img" src="../../img/plus.png" alt="上传图片">
                </div>
                <div id="img-container4" class="hideImg">
                    <input class="input-img-btn4 file-path" accept="image/png,image/gif" type="file">
                    <img class="back-img" src="" id="img4" alt="">
                    <img id="add-img-btn4" class="add-img" src="../../img/plus.png" alt="上传图片">
                </div>

            </div>
            <button id="btn">提交</button>
        </div>
    </div>
</div>
<script src="../../lib/jquery/jquery.min.js"></script>

<script src="../../lib/upload/uploadPreview.min.js"></script>
<script src="../../lib/upload/uploadPreview.js"></script>
<script>
    $(document).ready(function () {
        // 图片预览
        $(".file-path").on("change", function () {
            var objUrl = getObjectURL(this.files[0]);
            var srcAll = getObjectURL(this.files[0]);   //获取路径
            if (objUrl) {
                $(this).siblings(".back-img").attr("src", srcAll);
                $(this).siblings(".add-img").addClass('hideImg');
                $(this).parent().next().removeClass('hideImg');
            }
        });
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL !== undefined) {
                url = window.createObjectURL(file)
            } else if (window.URL !== undefined) {
                url = window.URL.createObjectURL(file)
            } else if (window.webkitURL !== undefined) {
                url = window.webkitURL.createObjectURL(file)
            }
            return url
        };
    });
</script>
<script src="../../lib/check/jquery-1.7.2.min.js"></script>
<script>
    $(document).ready(function () {//单选
        $("input[name='checkBoxJudge']:checkbox").click(function () {
            if ($(this).is(':checked')) {
                if ($(this).attr('id') === 'checkboxInputOne') {
                    $('#checkboxInputTwo').attr('checked', false);
                    $('#checkboxInputOne').attr('checked', true);
                } else {
                    $('#checkboxInputTwo').attr('checked', true);
                    $('#checkboxInputOne').attr('checked', false);
                }
            } else {
                $('#checkboxInputTwo').attr('checked', false);
                $('#checkboxInputOne').attr('checked', false);
            }
        });
    });

</script>
</body>
</html>